import { Component, Fragment } from 'react'
import Com from './components/Com';
import Father from './components2/Father';
import UnCom from './components3/UnCom';
import Mychildren from './components4/Mychildren';
import Dialog from './components5/Dialog';
import MyRef from './components6/MyRef';
import './App.css';


// class App extends Component {
//   state = {
//     flag: false
//   }
//   changeFlag = (flag) => {
//     this.setState({
//       flag
//     })
//   }
//   fn = (flag) => {
//     this.changeFlag(flag)
//   }
//   render() {
//     const { flag } = this.state
//     return <div className='App'>
//       <button onClick={() => {
//         this.changeFlag(true)
//       }}>
//         点我
//       </button>
//       {/* <Dialog vis={flag}>
//         <button onClick={() => {
//           this.changeFlag(false)
//         }}>取消</button>
//         <button>确定</button>
//       </Dialog> */}

//       {/* <Dialog vis={flag} dom="ul">
//         <ul>
//           <li>1111111</li>
//           <li>2222222</li>
//           <li>3333333</li>
//           <li>4444444</li>
//         </ul>
//       </Dialog> */}

//       <Dialog fn = { this.fn } vis={flag} dom="img">
//         <img width="100%" height="100%" src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.geoinfo.com.cn%2Fimages%2Floading.gif&refer=http%3A%2F%2Fwww.geoinfo.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662186542&t=41a070f594b22498e44d9c14c5542390' />
//       </Dialog>
//     </div>
//   }
// }








function App() {
  return (
    <div className="App">
      {/* <Mychildren>
        <h2>123</h2>
        <h2>456</h2>
      </Mychildren>

      <Mychildren>
        <h2>789</h2>
      </Mychildren> */}
{/* 


      <Mychildren></Mychildren> */}


      {/* <Dialog>
        <button>取消</button>
        <button>确定</button>
      </Dialog> */}


      <MyRef/>
    </div>
  );
}

// class App extends Component {
//   state = {
//     flag: true
//   }
//   render() {
//     const { flag } = this.state
//     return <div>
//       <button onClick={() => {
//         this.setState({
//           flag: false
//         })
//       }}>点我</button>
//       { flag? <UnCom />: '' }

//     </div>
//   }
// }

export default App;
